<template>
  <div class="gift-animation">
    <div 
      ref="giftRef"
      :class="['gift-img', { 'paused': paused, 'is-gif': isGif }]"
      :style="containerStyle"
      @click="toggleAnimation"
    >
      <!-- 对于GIF图片，使用img标签而不是背景图 -->
      <img v-if="isGif" :src="imageUrl" :alt="altText" :style="gifStyle" />
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue'

export default {
  name: 'GiftAnimation',
  
  props: {
    imageUrl: {
      type: String,
      required: true
    },
    frameCount: {
      type: Number,
      default: 10,
      validator: (value) => value > 0
    },
    duration: {
      type: Number,
      default: 1.5,
      validator: (value) => value > 0
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 60,
      validator: (value) => value > 0
    },
    height: {
      type: Number,
      default: 60,
      validator: (value) => value > 0
    },
    isGif: {
      type: Boolean,
      default: false
    },
    altText: {
      type: String,
      default: 'Gift animation'
    }
  },
  
  emits: ['animation-start', 'animation-end'],
  
  setup(props, { emit }) {
    const giftRef = ref(null)
    const paused = ref(!props.autoplay)
    let observer = null
    
    // 容器样式计算
    const containerStyle = computed(() => {
      if (props.isGif) {
        return {
          width: `${props.width}px`,
          height: `${props.height}px`,
          overflow: 'hidden',
          display: 'inline-block'
        }
      }
      
      return {
        'background-image': `url(${props.imageUrl})`,
        'background-size': `${props.frameCount * props.width}px ${props.height}px`,
        'width': `${props.width}px`,
        'height': `${props.height}px`,
        'animation-duration': `${props.duration}s`,
        '--frame-count': props.frameCount,
        '--sprite-width': `${props.frameCount * props.width}px`
      }
    })
    
    // GIF图片样式
    const gifStyle = computed(() => ({
      width: props.isGif ? '100%' : `${props.frameCount * props.width}px`,
      height: '100%',
      objectFit: 'contain',
      // 移除GIF的CSS动画，使用原生GIF动画
      animation: 'none',
      transform: 'none'
    }))
    
    // 控制动画播放/暂停
    const toggleAnimation = () => {
      paused.value = !paused.value
      if (!paused.value) {
        emit('animation-start')
      } else {
        emit('animation-end')
      }
    }
    
    // 初始化和清理
    onMounted(() => {
      if (props.autoplay) {
        emit('animation-start')
      }
      
      // 监听DOM尺寸变化
      if (window.ResizeObserver && !props.isGif) {
        observer = new ResizeObserver(entries => {
          updateAnimationParams()
        })
        
        if (giftRef.value) {
          observer.observe(giftRef.value)
        }
      }
    })
    
    onBeforeUnmount(() => {
      if (observer) {
        observer.disconnect()
      }
    })
    
    // 监听props变化，更新动画参数
    watch([() => props.width, () => props.height, () => props.frameCount], () => {
      updateAnimationParams()
    })
    
    // 更新动画参数
    const updateAnimationParams = () => {
      if (!giftRef.value || props.isGif) return
      
      const style = giftRef.value.style
      style.setProperty('--frame-count', props.frameCount)
      style.setProperty('--sprite-width', `${props.frameCount * props.width}px`)
      style.backgroundSize = `${props.frameCount * props.width}px ${props.height}px`
    }
    
    return {
      giftRef,
      paused,
      containerStyle,
      gifStyle,
      toggleAnimation
    }
  }
}
</script>

<style scoped>
.gift-img {
  animation: sprite-animation infinite;
  animation-timing-function: steps(var(--frame-count, 10));
}

@keyframes sprite-animation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: calc(-1 * var(--sprite-width, 600px)) 0;
  }
}

.paused {
  animation-play-state: paused;
}

.is-gif {
  background-image: none !important;
}

.is-gif img {
  object-fit: contain;
  /* 移除过渡效果 */
  transition: none;
}
</style>  